<template>
	<view class="container">
		<view>
			<tnTabbar :currentIndex="currentTabIndex" />
		</view>
		<Product ref="ProductList" :show="show" :city="locationCity" class="product-list"></Product>
		
		<!-- 添加"没有更多了"提示 -->
		<view class="no-more-tip">
			<view class="line"></view>
			<text class="no-more-text">没有更多了</text>
			<view class="line"></view>
		</view>
		
		<view class="search-bar" :style="{
			bottom: `${keyboardHeight}px`
		}">
			<view class="search-box">
				<view @click="dian" class="location-button">
					<text class="tn-icon-map-marked location-icon"></text>
					<text class="location-text">{{ locationCity }}</text>
					<text class="tn-icon-chevron-down location-arrow"></text>
				</view>
				
				<tn-input v-model="searchValue" class="search-input" placeholder="请输入...." :border="false" />
				<!-- 提交按钮，点击事件触发handleSubmit方法 -->
				<tn-button class="search-button tn-icon-search" :plain="true" :border="false" :fontSize="35" size="lg"
					@click="handleSubmit"></tn-button>
			</view>

			<view class="toast-container">
				<tn-toast ref="toast"></tn-toast>
			</view>
		</view>
	</view>
</template>

<script>
	import tTabbar from "@/components/tnTabbar/tnTabbar.vue";
	import Product from "@/components/Product-List/Product-List.vue"
	export default {
		components: {
			tTabbar,
			Product
		},
		data() {
			return {
				currentTabIndex: 1, // 当前选中的标签索引
				locationCity: "北京", // 位置信息-城市名称
				searchValue: "", // 添加搜索输入框的值
				keyboardHeight: 0, // 添加键盘高度属性
				
			};
		},
		mounted() {
			this.$nextTick(() => setTimeout(this.fetchLocation, 100));
		},
		onLoad() {
			// 监听键盘高度变化
			uni.onKeyboardHeightChange(res => {
				this.keyboardHeight = res.height - 265;
			})
		},
		// 页面滚动事件处理
		onPageScroll(e) {
			uni.$emit('onPageScroll', e)
		},
		onShow() {
			this.locationCity = uni.getStorageSync("locationCity");
			// 在城市更新后初始化商品列表
			this.$nextTick(() => {
				if (this.$refs.ProductList) {
					// 如果 Product 组件有接收城市参数的方法，可以调用它
					this.$refs.ProductList.getCategoryList();
				}
			},500);
		},
		methods: {
			show(content) {
				this.$refs.toast.show({
					content: content,
					duration: 1500 // 设置提示框显示时间
				})
			},
			dian() {
				uni.navigateTo({
					url: '/pages/area/locationCity'
				});
			},
			// 获取位置信息
			fetchLocation() {
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success: this.onLocationFetchSuccess,
					fail: this.onLocationFetchFail
				});
			},
			// 处理位置信息成功回调
			onLocationFetchSuccess(locationData) {
				const locationUrl = getApp().globalData.handleLocationUrl;
				const coordinates = `${locationData.longitude},${locationData.latitude}`;
				uni.request({
					url: `${locationUrl}${coordinates}`,
					method: 'GET',
					success: this.onAddressFetchSuccess,
					fail: this.onRequestFail
				});
			},
			// 处理获取地址成功回调
			onAddressFetchSuccess(response) {
				const address = response?.data?.regeocode?.addressComponent || {};
				this.position =
					`${address.province || ""} ${address.city || ""} ${address.district || ""}`.trim();
				let city = "";
				city = Array.isArray(address.city) ? (address.province || "未知城市") : address.city;
				this.locationCity = city;
				getApp().globalData.locationCity = city;
				uni.setStorageSync("locationCity", city);
			},
			// 处理位置请求失败
			onLocationFetchFail(error) {
				console.error("获取位置信息失败:", error);
			},
			// 处理请求失败回调
			onRequestFail(error) {
				console.error("请求数据失败:", error);
			},
			// 添加提交搜索请求方法
			handleSubmit() {
				// 获取输入的搜索值并去除前后空格
				this.searchValue = this.searchValue.trim();
				// 如果搜索值为空，显示提示信息
				if (!this.searchValue) {
					this.$refs.toast.show({
						content: '请输入搜索内容',
						duration: 1500 // 设置提示框显示时间
					});
					return;
				}
				// 调用产品列表组件的getInfoName方法进行搜索
				this.$refs.ProductList.getInfoName(this.searchValue)
			}
		}
	};
</script>

<style>
	.container {
		height: 100vh;
		overflow: hidden;
		background-color: #008080;
	}

	.product-list {
		height: calc(100% - 60px);
		overflow-y: auto;
		padding-bottom: 90px;
	}

	.search-bar {
		position: fixed;
		width: 95%;
		left: 2.5%;
		background-color: #008080;
		height: 45px;
		border-radius: 25px;
		border: none;
		z-index: 999;
		transition: bottom 0.3s;
		margin-bottom: 4%;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	}

	.search-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		height: 100%;
	}

	.location-button {
		display: flex;
		align-items: center;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 20px;
		padding: 5px 15px;
		width: auto;
		max-width: 30%;
	}
	
	.location-icon {
		color: #FFD700;
		font-size: 16px;
		margin-right: 4px;
	}
	
	.location-text {
		color: #ffffff;
		font-size: 16px;
		font-weight: 500;
		max-width: 80px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	.location-arrow {
		color: #ffffff;
		font-size: 12px;
	}
	
	.search-input {
		flex: 1;
		margin: 0 15px;
		background-color: rgba(255, 255, 255, 0.15);
		border-radius: 20px;
		height: 32px;
		padding: 0 15px 0 10px;
	}
	
	.search-input .uni-input-input,
	::v-deep .search-input .uni-input-input {
		color: #ffffff;
		font-size: 14px;
		padding-left: 5px;
		text-indent: 0;
	}
	
	.search-input .uni-input-placeholder,
	::v-deep .search-input .uni-input-placeholder {
		color: rgba(255, 255, 255, 0.7);
		padding-left: 10px;
	}
	
	.search-button {
		color: #ffffff;
		font-size: 20px;
		background: transparent;
		width: auto;
		padding: 0;
	}

	.toast-container {
		width: 100%;
		height: 30px;
	}

	/* 添加"没有更多了"提示样式 */
	.no-more-tip {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		padding: 15px 0;
		margin-bottom: 10px;
	}
	
	.line {
		height: 1px;
		background-color: rgba(255, 255, 255, 0.3);
		width: 25%;
	}
	
	.no-more-text {
		color: rgba(255, 255, 255, 0.7);
		font-size: 14px;
		margin: 0 15px;
	}
</style>